{% extends 'base/nav.html' %}

{% block title %}创建景点 - 旅游舆情监测{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-plus text-success"></i> 创建新景点
                    </h3>
                </div>
                <div class="panel-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        <!-- 景点名称 -->
                        <div class="form-group">
                            <label for="id_name" class="form-label">景点名称 *</label>
                            <input type="text" name="name" id="id_name" class="form-control"
                                   placeholder="请输入景点名称" required value="{{ form.name.value|default:'' }}">
                            {% if form.name.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.name.errors %}
                                        <i class="fa fa-exclamation-circle"></i> {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- 景点描述 -->
                        <div class="form-group">
                            <label for="id_description" class="form-label">景点描述 *</label>
                            <textarea name="description" id="id_description" class="form-control"
                                      placeholder="请输入景点描述" rows="5" required>{{ form.description.value|default:'' }}</textarea>
                            {% if form.description.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.description.errors %}
                                        <i class="fa fa-exclamation-circle"></i> {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- 位置信息 -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="id_province" class="form-label">省份 *</label>
                                    <input type="text" name="province" id="id_province" class="form-control"
                                           placeholder="例如：浙江" required value="{{ form.province.value|default:'' }}">
                                    {% if form.province.errors %}
                                        <div class="text-danger small mt-1">
                                            {% for error in form.province.errors %}
                                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="id_city" class="form-label">城市 *</label>
                                    <input type="text" name="city" id="id_city" class="form-control"
                                           placeholder="例如：杭州" required value="{{ form.city.value|default:'' }}">
                                    {% if form.city.errors %}
                                        <div class="text-danger small mt-1">
                                            {% for error in form.city.errors %}
                                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="id_location" class="form-label">详细位置 *</label>
                                    <input type="text" name="location" id="id_location" class="form-control"
                                           placeholder="例如：西湖区西湖风景区内" required value="{{ form.location.value|default:'' }}">
                                    {% if form.location.errors %}
                                        <div class="text-danger small mt-1">
                                            {% for error in form.location.errors %}
                                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- 主图上传 -->
                        <div class="form-group">
                            <label for="id_main_image" class="form-label">景点主图</label>
                            <input type="file" name="main_image" id="id_main_image" class="form-control-file">
                            {% if form.main_image.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.main_image.errors %}
                                        <i class="fa fa-exclamation-circle"></i> {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">建议上传 800x600 像素的图片</small>
                        </div>

                        <!-- 分类和标签 -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="id_categories" class="form-label">分类</label>
                                    <select name="categories" id="id_categories" class="form-control" multiple style="height: 120px;">
                                        {% for category in categories %}
                                        <option value="{{ category.id }}"
                                                {% if category.id in form.categories.value %}selected{% endif %}>
                                            {{ category.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    {% if form.categories.errors %}
                                        <div class="text-danger small mt-1">
                                            {% for error in form.categories.errors %}
                                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">按住Ctrl键多选</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="id_sentiment_tags" class="form-label">情感标签</label>
                                    <select name="sentiment_tags" id="id_sentiment_tags" class="form-control" multiple style="height: 120px;">
                                        {% for tag in sentiment_tags %}
                                        <option value="{{ tag.id }}"
                                                {% if tag.id in form.sentiment_tags.value %}selected{% endif %}>
                                            {{ tag.name }} ({{ tag.get_sentiment_type_display }})
                                        </option>
                                        {% endfor %}
                                    </select>
                                    {% if form.sentiment_tags.errors %}
                                        <div class="text-danger small mt-1">
                                            {% for error in form.sentiment_tags.errors %}
                                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">按住Ctrl键多选</small>
                                </div>
                            </div>
                        </div>

                        <!-- 状态 -->
                        <div class="form-group">
                            <label for="id_status" class="form-label">状态 *</label>
                            <select name="status" id="id_status" class="form-control" required>
                                <option value="">请选择状态</option>
                                <option value="draft" {% if form.status.value == 'draft' %}selected{% endif %}>草稿</option>
                                <option value="published" {% if form.status.value == 'published' %}selected{% endif %}>已发布</option>
                                <option value="pending" {% if form.status.value == 'pending' %}selected{% endif %}>待审核</option>
                            </select>
                            {% if form.status.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.status.errors %}
                                        <i class="fa fa-exclamation-circle"></i> {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- 显示非字段错误 -->
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                <i class="fa fa-exclamation-triangle"></i>
                                {% for error in form.non_field_errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}

                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fa fa-check"></i> 创建景点
                            </button>
                            <a href="{% url 'users:attraction_list' %}" class="btn btn-default btn-lg">
                                <i class="fa fa-times"></i> 取消
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.panel {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}

.panel-heading {
    background: linear-gradient(135deg, #1e88e5, #0d47a1);
    color: white;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
}

.panel-title {
    font-weight: 600;
    margin: 0;
}

.panel-body {
    padding: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.form-control {
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: #1e88e5;
    box-shadow: 0 0 0 0.2rem rgba(30, 136, 229, 0.25);
    outline: none;
}

.form-control-file {
    padding: 8px 0;
}

.alert {
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.text-danger {
    color: #dc3545;
    font-size: 13px;
}

.form-text {
    font-size: 12px;
}

.btn {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
}

.btn-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-default {
    background: #6c757d;
    color: white;
    border: none;
}

.btn-default:hover {
    background: #5a6268;
    color: white;
}
</style>
{% endblock %}